<template>
	<div id="datePage">
		<div class="top">
			<div class="header" v-show="(isBack&&fromIn)">
				<div class="dateTab">
					<div class="dateType" :class="{'activeLine':activeTab=='depDate'}">
						<div :class="{'checked':checked.dep.date}">
							<p class="title">去程日期</p>
							<p class="choosedMess" v-show="checked.dep.date">{{checked.dep.date}}<span class="price">{{checked.dep.price}}</span></p>
						</div>
					</div>
					<div class="dateType" :class="{'activeLine':activeTab=='arrDate'}">
						<div :class="{'checked':checked.arr.date}">
							<p class="title">返程日期</p>
							<p class="choosedMess" v-show="checked.arr.date">{{checked.arr.date}}<span class="price">{{checked.arr.price}}</span></p>
						</div>
					</div>
				</div>
			</div>
			<div class="week">
				<ul>
					<li>日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
				</ul>
			</div>
		</div>

		<div class="main" ref='date_scroll'>
			<div>
				<div class="months" v-for="month in Date_">
					<div class="title">{{month.title}}</div>
					<div class="days">
						<ul v-for="week in month.weeks">
							<li class="day" :class="{'checked':day.checked}" v-for="day in week" @click="check(day)">
								<div v-html="day.simpleVal" class="dayTop"></div>
								<div class="price">{{day.price}}</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>